<template>
	<view class="content">
		<view class="box">
			<view class="myintegral">
				<view class="left-box">
					<view class="title">
						总积分
					</view>
					<view class="integral">
						{{integral}}
					</view>
				</view>
				<view class="right-box" @click="goCash">提现</view>
			</view>
			<view class="tips-box red-text">
				*积分提现将扣除{{kefuData.commission}}%手续费，正常{{kefuData.account_time}}个工作日到账，法定节假日周末顺延。
			</view>
			<view class="integrallist">
				<view class="filter-box">
					<view class="left-box" @click="openFilter">
						<text class="filtername">{{filterForm.name}}</text>
						<u-icon name="arrow-down-fill" color="#6c6c6c" size="8"></u-icon>
					</view>
					<view class="right-box" @click="openTime">
						<text class="filtername">{{filterForm.time}}</text>
						<u-icon name="arrow-down-fill" color="#6c6c6c" size="8"></u-icon>
					</view>
				</view>
				<view class="item" v-for="item in pointsList">
					<view class="left">
						<view class="name">
							<text class="phone">
								{{item.content}}
							</text>
						</view>
						<view class="time">
							{{item.create_time}}
						</view>
					</view>
					<view class="right">
						{{item.commission}}
					</view>
				</view>
				<view v-if="pointsList.length==0" class="empty-box">
					<u-empty mode="list"></u-empty>
				</view>
			</view>
		</view>
		<u-popup :show="filterModal" mode="bottom" :round="25" @close="closeFilter" @open="openFilter">
			<view class="popup-box">
				<view class="title-bold">选择筛选项</view>
				<view class="block">
					<view class="type-name">收支类型</view>
					<view class="type-list">
						<view class="name-item" :class="item.typeId == filterForm.type?'type-cur':null" v-for="(item,key) in typeList" @click="changeTypeFunc(item)" :key="key">
							{{item.label}}
						</view>
					</view>
				</view>
				<view class="block">
					<view class="type-name">交易类型</view>
					<view class="buy-list">
						<view class="name-item" 
							:class="item.id == filterForm.buyType?'type-cur':null" 
							v-for="(item,key) in buyTypeList" 
							@click="changeBuyTypeFunc(item)" 
							:key="key">
							<!-- :!item.isDisabled?'disabled' -->
							<view :class="!item.isDisabled?'disabled':null">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="footer-btn">
					<view class="btn cancel-btn" @click="closeFilter">取消</view>
					<view class="btn success-btn" @click="confirmFilter">确定</view>
				</view>
			</view>
		</u-popup>
		<u-datetime-picker
			@close="closeTime"
			@cancel="closeTime"
			@confirm="confirmTime"
			:show="timeShow"
			ref="datetimePicker"
			mode="year-month"
			v-model="datetime"
		></u-datetime-picker>
	</view>
</template>

<script>
	import {
		gardMobile
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				pointsList: [],
				integral: '',
				settingData: {},
				kefuData: {},
				paging: {
					page: 1,
					limit: 10,
				},
				total: null,
				
				datetime: '',
				filterForm:{
					type:'0',
					buyType:'0',
					name:'全部账单',
					time:''
				},
				timeShow:false,
				filterModal:false,
				typeList:[
					{
						typeId: 0,
						label: '全部'
					},
					{
						typeId: 1,
						label: '收入'
					},
					{
						typeId: 2,
						label: '支出'
					},
				],
				buyTypeList:[
					{
						"id": 3,
						"name": "每日收益",
						isDisabled: true,
						typeId:1
					},
					{
						"id": 1,
						"name": "一级分销",
						isDisabled: true,
						typeId:1
					},
					{
						"id": 2,
						"name": "二级分销",
						isDisabled: true,
						typeId:1
					},
					{
						"id": 4,
						"name": "团队积分",
						isDisabled: true,
						typeId:1
					},
					{
						"id": 7,
						"name": "业务补贴",
						isDisabled: true,
						typeId:1
					},
					{
						"id": 5,
						"name": "提现",
						isDisabled: true,
						typeId:2
					},
					{
						"id": 6,
						"name": "积分抵扣",
						isDisabled: true,
						typeId:2
					},
					{
						"id": 8,
						"name": "退款",
						isDisabled: true,
						typeId:2
					},
				]
			}
		},
		onLoad() {
			this.filterForm.time = this.getToday();
			this.datetime = this.getToday();
			this.settingData = uni.getStorageSync('settingData')
			this.kefuData = this.settingData.value
			this.getPointsList()
		},
		onReachBottom() {
			if (this.pointsList.length == this.total) return
			this.paging.page++
			this.getPointsList("onReachBottom")
		},
		onPullDownRefresh() {
			uni.startPullDownRefresh({
				success: () => this.refresh(),
				complete: () => uni.stopPullDownRefresh()
			})
		},
		methods: {
			confirmFilter(){
				if(!this.filterForm.buyType){
					this.filterForm.name = this.filterForm.type==1?'全部收入':this.filterForm.type==2?'全部支出':'全部账单'
				}else{
					this.buyTypeList.map(item=>{
						if(this.filterForm.buyType==item.id){
							this.filterForm.name =  item.name
						}
					})
				}
				this.refresh()
				this.closeFilter()
			},
			confirmTime(today,e){
				let timestr = uni.$u.timeFormat(today.value/1000, 'yyyy-mm')
				this.filterForm.time = timestr
				this.refresh()
				this.closeTime()
			},
			getToday(){
				// 获取当前年份
				let currentYear = new Date().getFullYear();
				// 获取当前月份，需要加1，因为getMonth返回的月份是从0开始计算的
				let currentMonth = new Date().getMonth() + 1;
				if(currentMonth<10){
					currentMonth = '0'+currentMonth
				}
				 return currentYear+"-"+currentMonth
				// 输出当前年月
			},
			closeFilter(){
				this.filterModal = false
			},
			openFilter(){
				this.buyTypeList.map(res=>{
					res.isDisabled = true 
				})
				this.filterForm.type = ''
				this.filterForm.buyType = ''
				this.filterModal = true
			},
			filterChange(){
				this.filterModal = true
			},
			openTime(){
				this.timeShow = true
			},
			closeTime(){
				this.timeShow = false
			},
			goCash() {
				uni.navigateTo({
					url: '/pages/person/my/cash'
				})
			},
			changeTypeFunc(item){
				this.filterForm.buyType = null
				this.filterForm.type = item.typeId
				this.buyTypeList.map(res=>{
					res.isDisabled = true 
					if(res.typeId != item.typeId && item.typeId!=0){
						res.isDisabled = false 
					}
				})
			},
			changeBuyTypeFunc(item){
				if(item.isDisabled){
					this.filterForm.buyType = item.id
				}
			},
			getPointsList(type) {
				let params ={
					...this.paging,
					type:this.filterForm.buyType || '',
					time:this.filterForm.time || '',
					income_type:this.filterForm.type
				}
				console.log(params)
				this.$api.pointsList2(params).then(res => {
					console.log(res)
					this.integral = res.data.amount
					this.pointsList = [...this.pointsList, ...res.data.list]
					this.total = res.data.total
				}).catch(err=>{
					// console.log('err',err)
				})
			},
			// 刷新列表
			refresh() {
				this.integral = 0
				this.paging.page = 1
				this.total = null
				this.pointsList = []
				this.getPointsList()
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #f5f5f5;
		min-height: 100vh;
		z-index: -1;
	}

	.box {
		padding: 0 30rpx;
	}

	.myintegral {
		width: 690rpx;
		min-height: 200rpx;
		padding: 44rpx 0 28rpx 40rpx;
		background: url(@/static/img/coin-bg.png) no-repeat center/100%;
		border-radius: 15rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.left-box {
			flex: 1;
			margin-right: 20rpx;
		}

		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 38rpx;
			color: #333333;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
		}

		.integral {
			padding-top: 4rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 60rpx;
			color: #111111;
			line-height: 84rpx;
			text-align: left;
			font-style: normal;
		}

		.right-box {
			width: 140rpx;
			height: 70rpx;
			background: linear-gradient(270deg, #EA6F29 0%, #FAAA7D 100%);
			border-radius: 16rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 70rpx;
			text-align: center;
			font-style: normal;
			margin-right: 30rpx;
		}
	}

	.integrallist {
		margin-top: 20rpx;
		padding: 40rpx 30rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		.filter-box{
			display: flex;
			justify-content: space-between;
			.left-box{
				display: flex;
				justify-content: center;
				padding: 10rpx 30rpx;
				border-radius: 30rpx;
				background: #f3f3f3;
				color: #3a3a3a;
				font-size: 26rpx;
				.filtername{
					margin-right: 10rpx;
				}
			}
			.right-box{
				display: flex;
				justify-content: center;
			}
		}
		.title {
			padding-bottom: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #111111;
			line-height: 44rpx;
			text-align: center;
			font-style: normal;
		}

		.item {
			padding: 30rpx 0;
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #e7e7e7;

			.left {
				.name {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #111111;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}

				.time {
					padding-top: 2rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 28rpx;
					color: #999999;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
				}
			}

			.right {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #D06122;
				line-height: 60rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}

	.red-text {
		color: #D06122;
		margin-top: 12rpx;
		padding: 0 10rpx;

	}
	.popup-box{
		padding: 0 40rpx 100rpx;
		.title-bold{
			padding: 50rpx 0 0rpx;
			color: #000;
			font-weight: bold;
			font-size: 32rpx;
		}
		.block{
			margin-bottom: 10rpx;
			.type-name{
				line-height: 100rpx;
				color: #999999;
				font-size: 28rpx;
			}
			.type-list{
				display: flex;
				justify-content: space-between;
				.name-item{
					flex: 1;
					background: #f3f3f3;
					border-radius: 10rpx;
					color: #111;
					font-size: 28rpx;
					height: 90rpx;
					line-height: 90rpx;
					margin-right: 20rpx;
					text-align: center;
					&:last-of-type{
						margin-right: 0;
					}
				}
			}
			.type-cur{
				box-sizing: border-box;
				border-radius: 10rpx;
				outline: 1rpx solid #EA6F29;
				color: #fff;
			}
			.disabled{
				background: #f3f3f3;
				color: #999;
			}
			.buy-list{
				display: flex;
				flex-wrap: wrap;
				.name-item{
					width: calc(33% - 10rpx);
					background: #f3f3f3;
					border-radius: 10rpx;
					color: #111;
					font-size: 28rpx;
					height: 90rpx;
					line-height: 90rpx;
					margin-right: 15rpx;
					margin-bottom: 20rpx;
					text-align: center;
					&:nth-of-type(3n){
						margin-right: 0;
					}
				}
				
			}
		}
		.footer-btn{
			display: flex;
			justify-content: center;
			margin: 120rpx 0 30rpx;
			.btn{
				width: 260rpx;
				height: 90rpx;
				border-radius: 10rpx;
				line-height: 90rpx;
				text-align: center;
				background: #f3f3f3;
				color: #333;
				font-size: 32rpx;
				font-weight: bold;
			}
			.cancel-btn{
				margin-right: 30rpx;
			}
			.success-btn{
				background: #EA6F29;
				color: #fff;
			}
		}
	}
	
</style>